<template>
  <view class="goods-swiper">
    <swiper
      class="swiper"
      :autoplay="false"
      :touchable="true"
      :height="375"
      @change="swiperChange"
    >
      <swiper-item v-for="(item, index) in getPicList" :key="index">
        <video
          id="myVideo"
          class="goods-video"
          :src="item.pic_url"
          v-if="item.type && item.type == 'video'"
          @error="videoErrorCallback"
          controls
        ></video>
        <image
          v-else
          :src="item.pic_url"
          alt=""
          mode="aspectFill"
          @click="previewPics(index)"
        ></image>
      </swiper-item>
    </swiper>
    <view class="swiper-length" v-if="getPicList.length"
      >{{ swiperIndex + "/" + getPicList.length }}
    </view>
  </view>
</template>

<script>
export default {
  name: "",
  props: {
    goodsInfo: {
      type: Object,
      default: {}
    }
  },

  computed: {
    getPicList() {
      let { goodsInfo } = this;

      if (goodsInfo && goodsInfo.pic_list && goodsInfo.pic_list.length) {
        // #ifdef APP-PLUS
        return goodsInfo.pic_list.filter((el) => el.type !== "video");
        // #endif

        // #ifndef APP-PLUS
        return goodsInfo.pic_list;
        // #endif
      }
      return [];
    }
  },

  data() {
    return {
      swiperIndex: 1
    };
  },

  methods: {
    previewPics(e) {
      let pics = this.getPicList || [];
      let picArr = [];
      pics.forEach((item) => {
        picArr.push(item.pic_url);
      });
      uni.previewImage({
        current: e,
        urls: picArr,
        success() {
          uni.setStorageSync("usePreviewImgApi", "true");
        },
      });
    },
    swiperChange(e) {
      this.swiperIndex = Number(e.detail.current) + 1;
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-swiper {
  width: 100%;
  height: 750rpx;
  background-color: #fff;
  position: relative;
  swiper {
    width: 100%;
    height: 100%;
  }
  image {
    width: 100%;
    height: 100%;
  }
  .goods-video {
    width: 100%;
    height: 100%;
  }
  .swiper-length {
    padding: 0.3vw 3.73vw;
    position: absolute;
    right: 3.2vw;
    bottom: 4.53vw;
    z-index: 22;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #dddcdd;
    border-radius: 5vw;
  }
}
</style>
